<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>员工信息列表</title>
    <%--引入bootstrap样式--%>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-icons.css" rel="stylesheet">
    <link href="../css/user.css" rel="stylesheet">
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 向后台请求员工数据 -->
<jsp:include page="/userServlet"></jsp:include>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="heading"><strong>员工详情列表</strong></div>
        </div>
    </div>
    <form>
        <div class="form-row align-items-center" method="get" action="/userServlet">
            <div class="col-auto">
                <a class="form-control mb-2 btn btn-primary" href="#" role="button">新增员工</a>
            </div>
            <div class="col-auto">
                <label class="sr-only" >Username</label>
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">员工编号</div>
                    </div>
                    <input type="text" class="form-control" placeholder="" name="userId">
                </div>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-outline-info mb-2 user-search"><i class="bi bi-search"></i></button>
            </div>
        </div>
    </form>
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">员工编号</th>
            <th scope="col">姓名</th>
            <th scope="col">员工工号</th>
            <th scope="col">部门</th>
            <th scope="col">操作1</th>
            <th scope="col">操作2</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${userList}" var="item">
            <tr>
                <th scope="row">${item.userId}</th>
                <td class="col-sm-3">${item.userName}</td>
                <td class="col-sm-2">${item.jobNumber}</td>
                <td class="col-sm-2">${item.department.departName}</td>
                <td class="col-sm-1"><a class="btn btn-outline-primary" role="button" href="${pageContext.request.contextPath}/userServlet?userId=${item.userId}">编辑</a></td>
                <td class="col-sm-1"><button type="button" class="btn btn-outline-danger user-delete" onclick="javascript:delUser(${item.userId});">删除</button></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
</html>
